<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      @opened="getCarClassifyTreeList"
      :close-on-click-modal="false"
      width="75%"
      top="10vh"
      @closed="closeDialog"
    >
     <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="base">
          <base-data ref="baseData" :classifyList="classifyTreeData" :createForm="createForm" :title="title"></base-data>
        </el-tab-pane>
        <el-tab-pane label="品牌车系车型" name="brand">
          <brand-table ref="brandTable" :title="title"></brand-table>
        </el-tab-pane>
        <!-- <el-tab-pane label="区域经销商" name="regSup">
          <reg-sup-table ref="regSup" :title="title"></reg-sup-table>
        </el-tab-pane> -->
        <!-- <el-tab-pane label="图片" name="picture">
          <pic-list ref="pic" ></pic-list>
        </el-tab-pane> -->
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">关 闭</el-button>
        <el-button type="primary" @click="confirmData">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  // getCarClassifyList,
  getCarClassifyTreeList,
  getMaterialById,
} from '@/api/carLine'
import RegSupTable from './components/regSupTable.vue'
import BaseData from './components/baseData.vue'
import BrandTable from './components/brandTable.vue'
import PicList from './components/picList.vue'
export default {
  components: { RegSupTable,BaseData,BrandTable,PicList},
  name: 'addBrand',
  props: {
    row: {
      type: Object,
      default: {}
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeName:"base",
      visible:true,
      // classifyList:[],
      classifyTreeData:[],
      createForm: {
        id:"",
        name: '',
        initial: '',
        gatherTime: '',
        imgName:"",
        supplierCity:[]
      },
    }
  },
  created() {
    this.getCarClassifyTreeList()
    // this.getTopParentList()
    if(this.row.id){
      this.getMaterialById()
    }
  },
  mounted() {},
  methods: {
    handleClick(){
      if(this.activeName == 'regSup'){
        let that = this
        let list = this.createForm.supplierCity && this.createForm.supplierCity.length > 0 ? this.createForm.supplierCity:[]
        that.$refs.regSup.initTableData(list)
      }
      if(this.activeName == 'brand'){
        let that = this
        let list = this.createForm.cars && this.createForm.cars.length > 0 ? this.createForm.cars:[]
        that.$refs.brandTable.initTableData(list)
      }
    },
    /**
     * 获取单个配件的全部数据
     */
    getMaterialById() {
      let data = {
        materialId: this.row.id
      }
      getMaterialById(data).then((res) => {
        const { code = undefined, data = {} } = res.data
          if (!code) {
            this.createForm = data;
            this.$refs.regSup.initTableData(data.supplierCity);
            this.$refs.brandTable.initTableData(data.cars);
          } else {
            this.$message.error('获取配件分类失败')
          }
      })
    },
    /**
     * 获取配件分类的树形数据
     */
    // getTopParentList() {
    //   let param = {
    //     page: 1,
    //     size: 1000
    //   }
    //   getCarClassifyList(param)
    //     .then((res) => {
    //       const { code = undefined, data = {} } = res.data
    //       if (!code) {
    //         this.classifyList = data.content
    //       } else {
    //         this.$message.error('获取配件分类失败')
    //       }
    //     })
    //     .catch(() => {
    //       this.$message.error('服务器繁忙')
    //     })
    // },
     /**
     * 获取配件分类树形数据
     */
    getCarClassifyTreeList() {
      let param = {}
      getCarClassifyTreeList(param)
        .then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
           this.classifyTreeData =  this.getLabelName(data);
          } else {
            this.$message.error('获取配件分类失败')
          }
        })
        .catch(() => {
          this.$message.error('服务器繁忙')
        })
    },
    getLabelName(list){
      if(list.length >0){
        list.map(item=>{
          if(item.childList){
            item.lableName = item.parentName;
            this.getLabelName(item.childList)
          }else{
            item.lableName = item.name
          }
        })
      }
      return list
    },
    /**
     * 获取区域经销商表格数据
     */
    confirmData() {
      let flag = this.$refs.baseData.getValidate()
      if(flag){
        let arr =  this.$refs.regSup.getTableData();
        let brands =  this.$refs.brandTable.getTableData();
        let list = []
        arr.map((item) => {
          let op = {
            id: (item.id&&item.id.indexOf('_')!=-1) ? "":item.id,
            regionCode:item.regionCode,
            supplierId: item.supplierId,
            purchasePrice: item.purchasePrice,
            retailPrice: item.retailPrice
          }
          list.push(op)
        })
        this.createForm.cars = brands
        this.createForm.supplierCity = list
        this.$emit('ok', this.createForm)
      }else{
        this.activeName = "base"
      }
    },
    /**
     * 关闭弹框
     */
    closeDialog() {
      this.$emit('cancle')
    }
  }
}
</script>
<style scoped lang="less">
 .pictu {
    ::v-deep .el-upload--picture {
      width: 100px !important;
      height: 100px !important;
      line-height: 100px !important;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }

    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  }
.el-select,.el-input-number,.el-cascader--medium {
  width: 100%!important;;
  .el-input{
    width: 100%!important;;
  }
}
</style>
